<template>
	<view>
		<view class="topcs" style="margin-top: 5%;">
			<text class="toptext" style="" style="font-size: 32rpx;">扫码转账</text>
			<view class="topvw" style="align-items: center;">
				<view
					style="width: 4%;margin-left: 2% ;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view style="width: 10rpx; height: 10rpx;background-color: #000;border-radius: 50%;"></view>
					<view style="height: 30rpx;background: #000;width: 2rpx;"></view>
					<view style="width: 10rpx; height: 10rpx;background-color: red;border-radius: 50%;"></view>
				</view>
				<view style="padding: 3% 0;width: 77%;">
					<!-- <view
						style="width: 100%;padding: 2% 0;display: flex;flex-direction:row;align-items: center;border-bottom: 1rpx solid #F5F5F5">
						<text style="color: #000;font-weight: 900;">从</text>
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>  
					</view> -->
					<view
						style="border-bottom: 1rpx solid #F5F5F5;width: 100%;padding: 2% 0;display: flex;flex-direction:row;align-items: center;">
						<text style="color: chocolate;font-weight: 900;font-size: 32rpx;">到</text>
						<view style="display: flex;flex-direction: row;width: 100%;align-items: center;">

							<picker @change="bindPickerChangeq" style="width: 85%;" :value="indexq" :range="arrayq">
								<view class="uni-input" style="font-size: 32rpx;font-weight: 900;">{{arrayq[indexq]}}
								</view>
							</picker>
							<picker @change="bindPickerChangeq" :value="indexq" :range="arrayq">
								<uni-icons type="down" size="25"></uni-icons>
							</picker>

						</view>

					</view>
				</view>
				<view style="width: 15%;padding: 0;float: right;">
					<!-- <button class="button" type="primary"></button> -->
					<image src="../../../static/images/duoren.png" style="width: 100rpx;height: 100rpx;"> </image>
					<!-- <text style="font-size: 20rpx;font-weight: 900;">选择类型</text> -->
				</view>
			</view>
		</view>

		<view
			style="padding:15% 1%;margin: 2% 0;background-color: #fff;width: 100%;height: 15vh;display: flex;flex-direction: column;justify-content: center;">
			<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;">
				<text style="font-size: 32rpx;font-weight: 900;">{{arrayq[indexq]}}:</text><input type="number"
					@input="onKeyInput" :value="values"
					style="margin-top: 0%;border: 1rpx solid #F5F5F5;padding: 2%;height: 5vh;width: 80%;"
					placeholder-style="margin:5%;link-height: 5vh;" class="uni-inputa" maxlength="10"
					placeholder="请输入转账额度" />
			</view>
			<view style="margin-top: 5%;padding-left: 2%;;font-size: 32rpx;">
				<text
					style="margin-top: 5%;padding-left: 2%;;font-size: 32rpx;">可转出到对方<text>{{arrayq[indexq]}}</text><text
						style="font-size: 34rpx;color: red;font-weight: 900;">{{gerenxinxi[indexq]}}</text>是否 <text
						style="color: blue;font-weight: 500;" @click="quanbuzhuanchu"> 全部转出</text></text>
			</view>

		</view>
		<view class="Middle" v-if="exchangerateRecordlist.length>0">
			<view class="Middlevwlist" v-for="(item,index) in exchangerateRecordlist">
				<view class="Middlevwlist_vw">
					<text>{{item.type_text}}</text>
					<text>时间{{item.add_time}}</text>
				</view>
				<view class="Middlevwlist_vwq">{{item.money}}</view>
			</view>
		</view>
		<view class="Middlea"
			style="font-size: 38rpx;display: flex;align-items: center;justify-content: center;height: 40vh;" v-else>
			暂无数据
		</view>
		<view class="bottomvw"><button class="bottomvw_b" @click="exchangerate()">立即转账</button></view>
		<home></home>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<image :src="erweim"></image>
		</uni-popup>
	</view>

</template>

<script>
	const app = getApp();
	import {
		exchangerate,
		exchangerateRecord,
		exchangerateqrcode,
		quedingcode,
		erweimaRecord
	} from '@/api/order.js';
	import {
		site_config
	} from '@/api/user.js';
	import home from '@/components/home';
	export default {
		components: {
			home
		},
		data() {
			return {

				to_user_id: 0,
				erweim: '',
				title: 'picker',
				array: ['佣金', '金豆', app.globalData.site_config.integral, '余额'],
				arrayq: [],
				arrayw: [],
				typeq: ['1', '2', '3', '4'], 
				typew: ['1', '2', '3', '4'],
				index: 0,
				indexq: 0,
				time: '12:01',
				type: '',
				values: 0,
				exchangerateRecordlist: [],
				gerenxinxi: [],
				arrw: [],
				site_config: {},
				data: []
			}
		},
		onLoad(option) {
			this.to_user_id = option.id
			this.exchangerateRecord();
			this.exchangerateqrcode();
		},
		onShow() {
			this.site_config = app.globalData.site_config;
			this.site_configa();
		},
		methods: {
			// 配置信息 
			site_configa() {
				site_config().then(res => {
					this.data = res.data; 
					if (res.data.open_commission === '1') {
						this.arrayq.push(res.data.brokerage_price);
						this.arrayw.push('1');
						this.arrw.push('commission'); 
						this.gerenxinxi.push(JSON.parse(uni.getStorageSync('USER_INFO')).extractPrice);
					}
					if (res.data.open_gold === '1') {
						this.arrayq.push(res.data.now_gold);
						this.arrw.push('gold'); 
						this.arrayw.push('2');
						this.gerenxinxi.push(JSON.parse(uni.getStorageSync('USER_INFO')).now_gold);
					} 
					if (res.data.open_integral === '1') {
						this.arrayq.push(res.data.integral);
						this.arrw.push('integral'); 
						this.arrayw.push('3');			
						this.gerenxinxi.push(JSON.parse(uni.getStorageSync('USER_INFO')).integral);
					}  
					if (res.data.open_money === '1') {
						this.arrayq.push(res.data.now_money);
						this.arrayw.push('4');
						this.arrw.push('money'); 
						this.gerenxinxi.push(JSON.parse(uni.getStorageSync('USER_INFO')).now_money);
					} 
				})
			},
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			exchangerateRecord() {
				erweimaRecord({
					})
					.then(res => {

						this.exchangerateRecordlist = res.data.data
					})
					.catch(err => {

						that.loadTitle = '加载更多';
					});
			},
			exchangerateqrcode() {
				exchangerateqrcode({

					})
					.then(res => {

						this.erweim = res.msg;
					})
					.catch(err => {

						that.loadTitle = '加载更多';
					});
			},
			/**
			 * 确定汇率
			 */
			exchangerate: function() {
				this.type = this.arrayw[this.indexq]
				quedingcode({
						to_user_id: this.to_user_id,
						money: this.values,
						type: this.type
					})
					.then(res => {
						if (res.status === 200) {
							this.index = 0;
							this.indexq = 0;
							this.values = 0;
							this.exchangerateRecord();
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'success'
							});
						}
					})
					.catch(err => {

						uni.showToast({
							title: err,
							duration: 2000,
							icon: 'error'
						});

					});
			},
			onKeyInput: function(event) {

				if (parseFloat(event.target.value) > parseFloat(this.gerenxinxi[this.indexq])) {

					uni.showToast({
						title: '已超出当前' + this.arrayq[this.indexq],
						duration: 2000,
						icon: 'error'
					});
					
					this.values = this.gerenxinxi[this.indexq]
					// return
				} else {
					this.values = event.target.value
				}

			},
			bindPickerChange: function(e) {
				
				this.index = e.detail.value
			},
			bindPickerChangeq: function(e) {
				
				this.indexq = e.detail.value
				this.type = this.arrayw[this.indexq]
							

			},
			quanbuzhuanchu() {
				this.values = this.gerenxinxi[this.indexq]
			}

		}
	}
</script>

<style>
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {}

	.button {

		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		display: height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}

	.uni-input {
		/* width: 100%; */
		margin-left: 25rpx;
	}

	.topcs {
		display: flex;
		flex-direction: column;
		padding-left: 5%;
		background-color: #fff;
		padding-bottom: 5%;
	}

	.toptext {
		margin: 5% 0;
		font-size: 28rpx;
		font-weight: 900;
	}

	.topvw {
		display: flex;
		flex-direction: row;
		border: 2rpx solid #F5F5F5;
		padding: 0% 0;
		width: 95%;
	}

	.Middle {
		margin-top: 5%;
		background-color: #fff;
		padding: 2% 0;
	}

	.Middlevwlist {
		display: flex;
		flex-direction: row;
		padding: 2% 2%;
		border-bottom: 2rpx solid #F5F5F5;
		margin: 2%;
	}

	.Middlevwlist_vw {
		display: flex;
		flex-direction: column;
		width: 80%;
		justify-content: center;
	}

	.Middlevwlist_vw text {
		margin: 1% 0;
	}

	.Middlevwlist_vwq {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottomvw {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 5%;
		width: 100%;
	}

	.bottomvw_b {
		width: 90%;
		background-color: #E93323;
		color: #fff;
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>